<template>
	<view class="content flex_c">
		<view class="statusHeight"></view>
		<view class="topNavWrap">
			<view class="topNav padRL15 flex_r flex_ai_c flex_jc_sb">
				<view class="flex_r flex_ai_c" @click="navActive = !navActive">
					<text class="navTitle" :class="{'navActive':navActive}">全部</text>
					<text class="division">\</text>
					<text class="navTitle" :class="{'navActive':!navActive}">个人</text>
				</view>
				<view class="customerTypeWrap dsp_f flex_ai_c flex_jc_c flex_1">
					<view class="customerType flex_r flex_ai_c flex_jc_c" @click="customerAct = !customerAct,custCatAct = 0">
						<view class="dsp_f flex_ai_c flex_jc_c" :class="{'customerAct':customerAct}" >
							<text>私客</text>
						</view>
						<view class="dsp_f flex_ai_c flex_jc_c" :class="{'customerAct':!customerAct}">
							<text>公客</text>
						</view>
					</view>
				</view>
				<view class="flex_r flex_ai_c flex_jc_e" >
					<text class="navMsg">消息</text>
				</view>
			</view>
		</view>
		<view class="wrap">
			<view class="custCategoryWrap flex_r flex_ai_c flex_jc_c">
				<view class="custCatList  dsp_f flex_ai_c flex_jc_c flex_1" 
							v-for="(item,index) in (customerAct ? custPriArr : custPubArr)" 
							:key="index"
							@click="custCatAct = index">
					<text :class="{custCatAct : custCatAct === index}">{{item.tab}}</text>
				</view>
			</view>
			<scroll-view class="custListWrap flex_c flex_ai_c" scroll-y="true">
				<view class="custList flex_c flex_ai_c" v-for="(item,index) in custArr">
					<view class="custTitle flex_r flex_ai_c ">
						<view class="custTitleDec"/>
						<view class="flex_r flex_ai_c flex_jc_sb flex_1 padRight15">
							<text>{{item.custTitle}}</text>
							<view>
								<text class="custTypeName" :class="{'isFollowUp':item.custType === 1}">
									<text v-if="item.custType === 1" style="color: #858585;">跟进</text>
									{{item.followUp}}
									<text v-if="item.custType === 1" style="color: #858585;">次</text>
								</text>
							</view>
						</view>
					</view>
					<view class="custInfoWrap flex_r flex_jc_sb flex_ai_c">
						<view class="custInfo flex_c ">
							<view class="flex_r  flex_jc_s">
								<view class="custInfoIcoWrap">
									<view class="iconBg dsp_f flex_ai_c flex_jc_c" style="background: #f42121;">
										<view class="iconfont custInfoIco" >
											&#xe638;
										</view>
									</view>
								</view>
								<text>{{item.address}}</text>
							</view>
							<view class="flex_r  flex_jc_s">
								<view class="custInfoIcoWrap">
									<!-- <i class="icon-chanpin"></i> -->
									<view class="iconBg dsp_f flex_ai_c flex_jc_c" style="background: #216bf3;">
										<view class="iconfont custInfoIco">
											&#xe67c;
										</view>
									</view>
								</view>
								<text>{{item.product}}</text>
							</view>
						</view>
						<view class="buttonWrap padRight15 flex_r flex_ai_c flex_jc_c">
							<view class="iconfont custPhoneIcon">
								&#xe630;
							</view>
							<button class="uni-button-mini uni-button-primary">
								{{item.buttonName}}
							</button>
						</view>
					</view>
				</view>
			</scroll-view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//切换个人全部
				navActive:true,
				//切换公私客户
				customerAct:true,
				// 私客、公客
				custPriArr:[
					{tab:'全部',id:0},
					{tab:'A类',id:1},
					{tab:'B类',id:2},
					{tab:'C类',id:3},
					{tab:'D类',id:4},
				],
				custPubArr:[
					{tab:'全部',id:0},
					{tab:'已联系客户',id:1},
					{tab:'未联系客户',id:2},
				],
				//类型高亮
				custCatAct:0,
				
				//客户列表
				custArr:[
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'},
					{custTitle:'泉州众维咨询有限公司',custType:1,followUp:'8',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'跟进'},
					{custTitle:'泉州众维咨询有限公司',custType:1,followUp:'15',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'跟进'},
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'},
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'},
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'},
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'},
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'},
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'},
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'},
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'},
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'},
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'},
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'},
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'},
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'},
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'},
					{custTitle:'泉州众维咨询有限公司',custType:0,followUp:'待跟进',address:'福建泉州晋江池店',product:'认证咨询',buttonName:'下单'}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
.content {
	background-color: #f5f5f5;
	font-size: 32rpx;
	.statusHeight{
		z-index: 2000;
		width: 100%;
		height: var(--status-bar-height);
		background-image: linear-gradient(to right, #3478f5 , #3478f5);
		position: fixed;
		top: 0;
		left: 0;
	}
	.topNavWrap {
		z-index: 2000;
		width: 100%;
		height: 90rpx;
		background-image: linear-gradient(to right, #3478f5 , #3478f5);
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		.topNav{
			width: calc(100% - 60rpx);
			height: 100%;
			color: #FFFFFF;
			&>view:first-child,&>view:last-child{
				width: 164rpx;
				height: 100%;
			}
			.navActive{
				font-size: 36rpx !important;
				font-weight: 600;
			}
			.division{
				padding:0 10rpx;
			}
			.navTitle{
				font-size: 30rpx;
			}
			.navTitle,.navMsg {
				text-align: center;
				color: #FFFFFF;
			}
			.customerTypeWrap{
				font-size: 32rpx;
				.customerType{
					width: 210rpx;
					height: 70rpx;
					border: 1px solid #FFFFFF;
					border-radius: 10rpx;
					.customerAct{
						background-color: #FFFFFF !important;
						color: #333333 !important;
					}
					>view{
						width: 50%;
						height: 100%;
						color: #FFFFFF;
						>text{
						}
					}
				}
			}
		}
		
	}
	.wrap{
		width: 100%;
		min-height: calc(100vh - 130rpx);
		margin-top: calc(var(--status-bar-height) + 90rpx);
		padding-bottom: 20rpx;
		background-color: #f5f5f5;
		.custCategoryWrap{
			z-index: 2000;
			width: 100%;
			height: 85rpx;
			position: fixed;
			top: (var(--status-bar-height) + 90rpx);
			left: 0;
			border-bottom: 1px solid #e5e5e5;
			color: #919191;
			background-color: #FFFFFF;
			.custCatList{
				.custCatAct{
					border-bottom: 2px solid #3478f5;
					color: #3478f5;
				}
				>text{
					transition: all .3s;
					display: inline-block;
					height: 85rpx;
					line-height: 85rpx;
				}
			}
		}
		.custListWrap{
			padding-top: calc(var(--status-bar-height) + 0rpx);
			.custList{
				width: 685rpx;
				height: 205rpx;
				margin: 30rpx auto 0 auto;
				border-radius: 10rpx;
				background-color: #FFFFFF;
				color: #333333;
				.custTitle{
					width: 100%;
					height: 75rpx;
					border-bottom: 1px solid #e4e4e4;
					font-size: 28rpx;
					.custTitleDec{
						width: 2px;
						height: 30rpx;
						margin: 0 20rpx;
						background-color: #007af0;
					}
					.custTypeName{
						color: #f18900;
					}
					.isFollowUp{
						color: #f32122;
					}
				}
				.custInfoWrap{
					width: calc(100% - 22rpx);
					height: 100%;
					padding-left: 22rpx;
					color: #858585;
					.custInfo{
						font-size: 26rpx;
						>view:first-child{
							margin-bottom: 20rpx;
						}
						.custInfoIcoWrap{
							.iconBg{
								width: 31rpx;
								height: 31rpx;
								margin-right: 10rpx;
								padding: 3rpx;
								border-radius: 100px;
								text-align: center;
								.custInfoIco{
									font-size: 24rpx;
									color: #FFFFFF;
								}
							}
							
						}
					}
					.buttonWrap{
						.custPhoneIcon{
							width: 50rpx;
							height: 50rpx;
							margin-right: 20rpx;
							text-align: center;
							line-height: 50rpx;
							font-size: 36rpx;
							color: #2196f3;
						}
					}
				}
			}
		}
	}
}
</style>
